<template>
    <div :style="{'width':width+'px','margin': 'auto'}">
        <Form  ref="info" :model="info" :rules=rule :label-width="labelWidth" :class="[labelClass]">
            <template v-for="(val,key) in info">
                <template v-if="format.hasOwnProperty(key)">
                    <template v-if="format[key].labelType == 'table'">
                        <Collapse class="mb-20">
                            <Panel>
                                {{format[key].labelName}}
                                <div class="mt-10" slot="content">
                                    <Table :data=info[key] :columns=format[key].labelValue border stripe></Table>
                                </div>
                            </Panel>
                        </Collapse>
                    </template>
                    <template v-else-if="format[key].labelType=='collapse'">
                        <Collapse v-model="format[key].labelColKey" class="mtb-10">
                            <Panel name="1">
                                {{format[key].labelName}}
                                <div slot="content">
                                    <Form-item v-for="(childVal,childKey) in format[key].labelColList" :key="childKey" :prop=childKey :label="getLabelName(format[key].labelColList[childKey].labelName)">
                                        <template v-if="(format[key].labelColList[childKey].labelType == 'text')">
                                            <Input v-model.trim=info[childKey] :placeholder="getPlaceHolder(format[key].labelColList[childKey].labelName)" :disabled=format[key].labelColList[childKey].labelDisabled></Input>
                                        </template>
                                        <template v-else-if="(format[key].labelColList[childKey].labelType == 'password')">
                                            <Input type="password" v-model.trim=info[childKey] :placeholder="getPlaceHolder(format[key].labelColList[childKey].labelName)" :disabled=format[key].labelColList[childKey].labelDisabled></Input>
                                        </template>
                                        <template v-else-if="(format[key].labelColList[childKey].labelType == 'textarea')">
                                            <Input type=textarea :autosize="{minRows: 3,maxRows: 100}" :rows='3' v-model.trim=info[childKey] :placeholder="getPlaceHolder(format[key].labelColList[childKey].labelName)" :disabled=format[key].labelColList[childKey].labelDisabled></Input>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='Number'">
                                            <Input v-model.trim=info[childKey] :placeholder="getPlaceHolder(format[key].labelColList[childKey].labelName)" number :disabled=format[key].labelColList[childKey].labelDisabled></Input>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='radio'">
                                            <RadioGroup v-model=info[childKey] @on-change="onChangeKey(key,childKey)">
                                                <template v-for="labelVal in format[key].labelColList[childKey].labelValue">
                                                    <Radio :label=labelVal.key :disabled=format[key].labelColList[childKey].labelDisabled :key="labelVal.key">{{labelVal.value}}</Radio>
                                                </template>
                                            </RadioGroup>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='select'">

                                            <Select v-model=info[childKey] filterable :disabled=format[key].labelColList[childKey].labelDisabled @on-change="onChangeKey(key,childKey)" :placeholder="getPlaceHolder(format[key].labelColList[childKey].labelName,'选择')" :multiple="format[key].labelColList[childKey].labelMultiple" transfer>
                                                <Option :value=labelVal.id v-for="labelVal in format[key].labelColList[childKey].labelValue" :label="'('+labelVal.id+')'+labelVal.name" :key="labelVal.id" :disabled="labelVal.disabled"><span>{{labelVal.name}}</span></Option>
                                            </Select>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='selectImg'">
                                            <Select v-model=info[childKey] filterable :disabled=format[key].labelColList[childKey].labelDisabled @on-change="onChangeKey(key,childKey)">
                                                <Option :value=labelVal.id v-for="labelVal in format[key].labelColList[childKey].labelValue" :label=labelVal.name :key="labelVal"><span>{{labelVal.name}}</span><span style="float:right;color:#ccc">{{labelVal.id}}</span></Option>
                                            </Select>
                                            <div class="form-upload-list" v-if="format[key].labelColList[childKey].labelValue!=''">
                                                <img :src="format[key].labelColList[childKey].labelValue">
                                            </div>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='Daterange'">
                                            <DatePicker type="daterange" v-model=info[childKey] placeholder="请选择时间" style="width: 190px" :editable=false :options="dateOptions" @on-change="onChangeKey(key,childKey)"></DatePicker>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='dateTime'">
                                            <DatePicker  :type=childKey.dateFormat  :format=childKey.format :options=dateOption(key) placeholder="选择日期时间" v-model=info[childKey] :readonly="format[key].labelColList[childKey].labelDisabled"></DatePicker>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='time'">
                                            <TimePicker :steps="[1,15]" :type=childKey.dateFormat  :format=childKey.format placeholder="选择日期时间" v-model=info[childKey] :readonly="format[key].labelColList[childKey].labelDisabled"></TimePicker>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='checkBoxGroup'">
                                            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                                                <Checkbox
                                                        :indeterminate="info[childKey].length>0&&info[childKey].length<format[key].labelColList[childKey].labelValue.length"
                                                        :value="checkAll[key]"
                                                        :disabled="format[key].labelColList[childKey].labelDisabled"
                                                        @click.prevent.native="handleCheckAll(key)" v-show="format[key].labelColList[childKey].labelValue.length>0">全选</Checkbox>
                                            </div>
                                            <CheckboxGroup v-model=info[childKey] @on-change="onChangeKey(key,childKey)">
                                                <Checkbox v-for="labelVal in format[key].labelColList[childKey].labelValue" :key=labelVal.id :label="labelVal.id" :disabled="format[key].labelColList[childKey].labelDisabled||labelVal.disabled">{{labelVal.name}}</Checkbox>
                                            </CheckboxGroup>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='checkBox'">
                                            <Checkbox v-model=info[childKey]></Checkbox>
                                        </template>
                                        <template v-else-if="format[key].labelColList[childKey].labelType=='cascader'">
                                            <Cascader :data="format[key].labelColList[childKey].labelValue" v-model=info[childKey] change-on-select :disabled="format[key].labelColList[childKey].labelDisabled" @on-change="onChangeCascader(key,childKey)"></Cascader>
                                        </template>

                                        <template v-else-if="format[key].labelColList[childKey].labelType=='upload'">
                                            <div class="form-upload-list" v-for="item in uploadList[childKey.labelNameKey.uploadKey]">
                                                <template v-if="item.status === 'finished'">
                                                    <div class="form-upload-list-cover">
                                                        <a :href="item.url">{{item.name}}</a><Icon type="ios-trash" color="#ed3f14" @click.native="handleRemove(item,format[key].uploadKey)" v-show="!format[key].labelDisabled" style="cursor:pointer"></Icon>
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                                </template>
                                            </div>
                                            <Upload
                                                    :ref="childKey.uploadKey"
                                                    multiple
                                                    :action="getHttpUrlForUpload('upload',childKey.uploadDir)"
                                                    :format="fileExt"
                                                    :show-upload-list="true"
                                                    :default-file-list="format[key].labelColList[childKey].labelValue"
                                                    :on-success="handleUploadSuccess"
                                                    :on-format-error="handleUploadFormatError"
                                                    :before-upload="handleBeforeUpload(childKey)"
                                            >
                                                <Button type="error" icon="ios-cloud-upload-outline" :disabled="format[key].labelColList[childKey].labelDisabled">上传文件</Button>
                                            </Upload>
                                        </template>
                                        
                                        <template v-else>
                                            <div>{{info[childKey]}}</div>
                                        </template>
                                    </Form-item>
                                </div>
                            </Panel>
                        </Collapse>
                    </template>
                    <template v-else>
                        <Form-item :label="getLabelName(format[key].labelName)" :class="[{'label-alert':format[key].labelAlert!=undefined}]" :prop=key v-show="!format[key].labelHide">
                            <Row>
                                <Col :span="format[key].labelMessage!=undefined?'15':format[key].labelAlert==undefined? '24':'4'" >
                                    <template v-if="(format[key].labelType == 'label')">
                                        <div>
                                            <b v-if="format[key].labelBold" :style="{color:format[key].labelColor==undefined?'#515a6e':format[key].labelColor}">{{info[key]}}</b>
                                            <span v-else>{{info[key]}}</span>
                                        </div>
                                    </template>
                                    <template v-if="(format[key].labelType == 'text')">
                                        <el-input v-model.trim=info[key] :placeholder="format[key].placeholder" :disabled=format[key].labelDisabled></el-input>
                                    </template>
                                    <template v-if="(format[key].labelType == 'password')">
                                        <Input type="password" v-model.trim=info[key] :placeholder="getPlaceHolder(format[key].labelName)" :disabled=format[key].labelDisabled></Input>
                                    </template>
                                    <template v-else-if="(format[key].labelType == 'textarea')">
                                        <Input type=textarea show-word-limit :maxlength="format[key].maxlength?format[key].maxlength:200" :autosize="{minRows: 3,maxRows: 200}" :rows='3' v-model.trim=info[key] :placeholder="getPlaceHolder(format[key].labelName)" :disabled=format[key].labelDisabled></Input>
                                    </template>
                                    <template v-else-if="format[key].labelType=='Number'">
                                        <Input v-model.trim=info[key] :placeholder="getPlaceHolder(format[key].labelName)" step="0.0001" number :disabled=format[key].labelDisabled></Input>
                                    </template>
                                    <template v-else-if="format[key].labelType=='radio'">
                                        <RadioGroup v-model=info[key] @on-change="onChangeKey(key,'')">
                                            <template v-for="labelVal in format[key].labelValue">
                                                <Radio :label=labelVal.key :disabled=format[key].labelDisabled :key="labelVal.key">{{labelVal.value}}</Radio>
                                            </template>
                                        </RadioGroup>
                                    </template>
                                    <template v-else-if="format[key].labelType=='select'">
                                        <el-select v-model=info[key] filterable :disabled=format[key].labelDisabled @change="onChangeKey(key,'')" :placeholder="getPlaceHolder(format[key].labelName,'选择')" :multiple="format[key].labelMultiple" transfer>
                                            <el-option :value=labelVal.id v-for="labelVal in format[key].labelValue" :label="labelVal.name" :key="labelVal.id" :disabled="labelVal.disabled"><span>{{labelVal.name}}</span></el-option>
                                        </el-select>
                                    </template>
                                    <template v-else-if="format[key].labelType=='selectImg'">
                                        <Select v-model=info[key] filterable :disabled=format[key].labelDisabled @on-change="onChangeKey(key,'')">
                                            <Option :value=labelVal.id v-for="labelVal in format[key].labelValue" :label=labelVal.name :key="labelVal"><span>{{labelVal.name}}</span><span style="float:right;color:#ccc">{{labelVal.id}}</span></Option>
                                        </Select>
                                        <div class="form-upload-list" v-if="format[key].labelValue!=''">
                                            <img :src="format[key].labelValue">
                                        </div>
                                    </template>
                                    <template v-else-if="format[key].labelType=='Daterange'">
                                        <DatePicker type="daterange" v-model=info[key] placeholder="请选择时间" style="width: 190px" :editable=false :options="dateOptions" @on-change="onChangeKey(key)"></DatePicker>
                                    </template>
                                    <template v-else-if="format[key].labelType=='dateTime'">
                                        <DatePicker  :type=format[key].dateFormat  :format=format[key].format :options=dateOption(key) placeholder="选择日期时间" v-model=info[key] :readonly="format[key].labelDisabled"></DatePicker>
                                    </template>
                                    <template v-else-if="format[key].labelType=='time'">
                                        <TimePicker :steps="[1,15]" :type=format[key].dateFormat  :format=format[key].format placeholder="选择日期时间" v-model=info[key] :readonly="format[key].labelDisabled"></TimePicker>
                                    </template>
                                    <template v-else-if="format[key].labelType=='checkBoxGroup'">
                                        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                                            <Checkbox
                                                    :indeterminate="info[key].length>0&&info[key].length<format[key].labelValue.length"
                                                    :value="checkAll[key]"
                                                    :disabled="format[key].labelDisabled"
                                                    @click.prevent.native="handleCheckAll(key)" v-show="format[key].labelValue.length>0">全选</Checkbox>
                                        </div>
                                        <CheckboxGroup v-model=info[key] @on-change="onChangeKey(key,'')">
                                            <Checkbox v-for="labelVal in format[key].labelValue" :key=labelVal.id :label="labelVal.id" :disabled="format[key].labelDisabled||labelVal.disabled">{{labelVal.name}}</Checkbox>
                                        </CheckboxGroup>
                                    </template>
                                    <template v-else-if="format[key].labelType=='elnumber'">
                                            <el-input-number :max="format[key].max" v-model=info[key] label="描述文字" ></el-input-number>
                                    </template>
                                    <template v-else-if="format[key].labelType=='switch'">
                                        <el-switch v-model=info[key]  active-value="1" inactive-value="2" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                                    </template>                                    
                                    <template v-else-if="format[key].labelType=='checkBox'">
                                        <Checkbox v-model=info[key]></Checkbox>
                                    </template>
                                    <template v-else-if="format[key].labelType=='cascader'">
                                        <Cascader :data="format[key].labelValue" v-model=info[key] change-on-select :disabled="format[key].labelDisabled" @on-change="onChangeCascader(key,'')"></Cascader>
                                    </template>
                                    <template v-else-if="format[key].labelType=='uploadFile'">
                                        <Upload
                                            :ref="format[key].uploadKey"
                                            multiple
                                            :action="getHttpUrlForUpload('upload',format[key].uploadDir)"
                                            :before-upload="handleBeforeUpload"
                                            :file-list="format[key].labelValue"
                                            :on-success="handleUploadSuccess"
                                            :on-remove="handleRemove"
                                            :on-preview="handlePreview"
                                            >
                                            <Button type="dashed" icon="ios-cloud-upload-outline" :disabled="format[key].labelDisabled" @click="clickButtonBeforeUpload(key)">上传文件</Button>
                                        </Upload>
                                        <!-- <el-dialog :visible.sync="dialogVisible" :modal="modal">
                                        <img width="50%" :src="dialogImageUrl" alt="">
                                        </el-dialog> -->
                                    </template>
                                    <template v-else-if="format[key].labelType=='upload'">
                                        <div class="form-upload-list" v-for="item in uploadList[format[key].uploadKey]">
                                            <template v-if="item.status === 'finished'">
                                                <div class="form-upload-list-cover">
                                                    <a :href="item.url">{{item.name}}</a><Icon type="ios-trash" color="#ed3f14" @click.native="handleRemove(item,format[key].uploadKey)" v-show="!format[key].labelDisabled" style="cursor:pointer"></Icon>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                            </template>
                                        </div>
                                        <Upload
                                                :ref="format[key].uploadKey"
                                                multiple
                                                :action="getHttpUrlForUpload('upload',format[key].uploadDir)"
                                                :format="fileExt"
                                                :show-upload-list="false"
                                                :default-file-list="format[key].labelValue"
                                                :on-success="handleUploadSuccess"
                                                :on-format-error="handleUploadFormatError"
                                                :before-upload="handleBeforeUpload(format[key])"
                                        >
                                            <Button type="dashed" icon="ios-cloud-upload-outline" :disabled="format[key].labelDisabled" @click="clickButtonBeforeUpload(key)">上传文件</Button>
                                        </Upload>
                                    </template>
                                    <template v-else-if="format[key].labelType=='tableprice'">
                                            <el-table
                                            :data="format[key].labelValue"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="desc"
                                                width="150"
                                                label="业务名称"
                                                >
                                            </el-table-column>
                                            <el-table-column
                                                prop="unit_price"
                                                label="平台价格"
                                                >
                                            </el-table-column>
                                            <el-table-column
                                                prop="price"
                                                width="125"
                                                label="配置价格">
                                                <template slot-scope="scope">
                                                    <div class="el-input-wrap">
                                                        <el-input-number  :controls="false" :min="scope.row.unit_price" :max="scope.row.unit_price * 2"  v-model='scope.row.price' :placeholder="scope.row.unit_price +'~'+scope.row.unit_price * 2" :disabled=format[key].labelDisabled></el-input-number>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            </el-table>
                                        </template>
                                </Col>
                                    <Tooltip  max-width="700" v-if="format[key].toolTip!=undefined" :content="format[key].toolTip" placement="right" theme="light">
                                        <img src="../../assets/images/peach-svg/tooltip.svg"/>
                                    </Tooltip>
                                <Col span="8" v-if="format[key].labelMessage!=undefined" style="margin-left:5px;">{{format[key].labelMessage}}</Col>
                                <Col span="18" v-if="format[key].labelAlert!=undefined" style="margin-left:5px;color:#ed4014;margin-top:1px;">{{format[key].labelAlert}}</Col>
                            </Row>
                        </Form-item>
                    </template>
                </template>
            </template>
            <Form-item class="Form-item-button">
                <Button type="default" @click="closeSubmit()" v-show="cancelBtnStatus!=0" :disabled="cancelBtnStatus==2">{{cancelBtnText}}</Button>
                <Button type="primary" @click="handleSubmit('info')" v-show="okBtnStatus!=0" :disabled="okBtnStatus==2">{{okBtnText}}</Button>
            </Form-item>
            <Modal title="查看图片" v-model="visible" width="300">
                <img :src="CDN + imgName" v-if="visible" style="width: 100%">
            </Modal>
        </Form>
    </div>
</template>

<script>
    import {RequestUrl} from "../../commons/staticName"
    import utils from "@/commons/utils"
    export default {
        name: "my-form",
        props: {
            info: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            format: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            width: {
                type: Number,
                default: 400
            },
            labelWidth: {
                type: Number,
                default: 100
            },
            rule: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            CDN: {
                type: String,
                default: ""
            },
            cancelBtnStatus: {
                type: Number, //0 不可见 1可点击 2不可点击
                default: 1
            },
            okBtnStatus: {
                type: Number, //0 不可见 1可点击 2不可点击
                default: 1
            },
            okBtnText: {
                type: String,
                default: "提交"
            },
            cancelBtnText: {
                type: String,
                default: "取消"
            },
            labelClass:{
                type:String,
                default:"",
            }
        },
        data() {
            return {
                uploadList: {},
                fileExt:['jpg','jpeg','png','gif','doc','docx','xls','xlsx','csv','txt'],
                imgName: "",
                visible: false,
                httpUrl: RequestUrl+"upload",
                indeterminate:{},
                checkAll:{},
                selectUploadKey:"",
                dateOptions:{
                    // disabledDate(date){
                    //     return date && date.valueOf() > Date.now();
                    // }
                },
            };
        },
        methods: {
            handleChange(data){
                console.log(data);
            },
            //新
            getHttpUrlForUpload(action, uploadDir = "") {
                let dirName = "";
                if (uploadDir != "") {
                    dirName = uploadDir;
                }
                if(dirName==undefined) dirName="";
                if (action != "delFile") {
                    return this.httpUrl + "?mod=" + dirName;
                } else {
                    return this.httpUrl + "?action=delFile&dir=" + dirName;
                }
            },
            getPlaceHolder(name,tipText="输入") {
                // return "无";
                return "请"+tipText + name;
            },
            getLabelName(name) {
                return name ;
            },
            getDefaultUploadList(_fileList, key = "whatever") {
                let _fileArray =[]
                console.log(_fileList);
                _fileArray = _fileList.split(",");
                if (_fileList == "" || _fileArray.length == 0)
                    return this.format[key].labelValue;
                let _fileListArray = [];
                for (let _fileName in _fileArray) {
                    let fileObj = {
                        name: _fileArray[_fileName],
                        url: this.CDN + _fileArray[_fileName]
                    };
                    _fileListArray.push(fileObj);
                }
                Vue.set(this.format[key], "labelValue", _fileListArray);
                return this.format[key].labelValue;
            },
            //新提交
            handleSubmit(name) {
                this.$refs[name].validate(valid => {
                    if (valid) {
                        // this.$message.success("开始提交!");
                        for (let key in this.format) {
                            if (this.format[key].labelType.indexOf("upload")>-1) {
                            this.info[key] = "";
                            let _upList = this.format[key].labelValue;
                                for (let i = 0; i < _upList.length; i++) {
                                    if (i != 0) this.info[key] += ",";
                                    this.info[key] += _upList[i].response.filename;
                                }
                            }
                            if (this.format[key].labelType.indexOf('tableprice')>-1){
                                this.info[key] = this.format[key].labelValue
                            }
                            
                        }   
                        this.$emit("submit", this.info);
                    } 
                    else {
                      this.$message.error("表单验证失败!");
                    }
                });
            },
            closeSubmit() {
                this.$emit("closeform", this.info);
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },
            //新上传方法
            handleUploadSuccess(res, file, fileList) {
            if (res.code == 0) {
                console.log(res,file,fileList,"res,,,,file")                
                // file.name = res.filename;
            } else {
                var error_msg = "未知错误";
                if (res.code == -1) {
                error_msg = "上传尺寸有误，不允许宽高超过1000的图片";
                }
                this.$Notice.warning({
                title: "上传失败",
                desc: error_msg
                });
                return
            }
            this.format[this.selectUploadKey].labelValue = utils.cloneObj(fileList)
            utils.hideLoading();
            },
            clickButtonBeforeUpload(key){
                this.selectUploadKey = key;
            },
            handlePreview(file) {
            const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
            let index= file.name.lastIndexOf(".");
            let ext = file.name.substr(index+1);
            let Picture =imglist.indexOf(ext.toLowerCase()) !== -1
            if(Picture){
                this.dialogImageUrl = CDN+file.name;
                this.dialogVisible = true;
            }else if("txt".indexOf(ext.toLowerCase()) !== -1){
                let url = CDN+file.name;
                this.downloadFile2(url)
            }else{
                let urlNotext = CDN+file.name;
                window.open(urlNotext)
            }
            },
            handleUploadFormatError(file) {
                this.$Notice.warning({
                    title: "文件格式不正确",
                    desc:
                        "文件 " +
                        file.name +
                        " 格式不正确，请上传 "+this.fileExt.join(",")+"的文件"
                });
            },
            //上传
            handleBeforeUpload(file) {
                utils.showLoading()
                this.oldFileName = file.name
                let _handleInfo = this.format[this.selectUploadKey];
                if (_handleInfo != undefined) {
                let limitCnt = _handleInfo.limitCnt;
                let tips=" 张图片";
                if(_handleInfo.labelType=="uploadFile"){
                    tips=" 份文件"
                }
                let len = _handleInfo.labelValue.length;
                let check = limitCnt == -1 || len < limitCnt;
                if (!check) {
                    this.$message.error("最多只能上传 " + limitCnt + tips+"。");
                    return check;
                }

                check = file.size<=_handleInfo.labelMaxSize;
                if(!check){
                    // this.$message.error('上传文件大小不能超过 '+(file.size/(1024*1024)).toFixed(2)+'MB!');
                    this.$message.error('上传文件大小不能超过15MB!');
                    return check;
                }
                // debugger
                console.log(file.name);
               try{
                 let etype = file.name.split(".")[file.name.split(".").length-1];
                 if(_handleInfo.format != null) {
                    if(_handleInfo.format.indexOf(etype)==-1){
                    this.$message.error('文件格式不正确，请上传格式为txt的文件。');
                    return false
                    }
                }

               }catch(err) {
                
               }
                
                
                return true;
                }
            },
            handleView(name) {
                this.imgName = name;
                this.visible = true;
            },
            //新
            handleRemove(file, fileList) {
            // 从 upload 实例删除数据
            this.format["file"].labelValue = utils.cloneObj(fileList)
            },
            onChangeKey(key,childKey) {
                if(childKey == ''){
                    let _format = this.format[key];
                    if(_format.labelType=="checkBoxGroup"){
                        if(this.info[key].length==_format.labelValue.length){
                            this.checkAll[key]= true;
                        }else{
                            this.checkAll[key]= false;
                        }
                    }
                    if (_format.hasOwnProperty("labelChange")) {
                        this.$nextTick(()=> {
                            this.$emit("on-select-submit", _format.labelChange, this.info[key],true);
                        });
                    }
                }else{
                    let _format = this.format[key]['labelColList'][childKey];
                    if(_format.labelType=="checkBoxGroup"){
                        if(this.info[childKey].length==_format.labelValue.length){
                            this.checkAll[childKey] = true;
                        }else{
                            this.checkAll[childKey] = false;
                        }
                    }
                    if (_format.hasOwnProperty("labelChange")) {
                        this.$nextTick(()=> {
                            this.$emit("on-select-submit", _format.labelChange, this.info[childKey],true);
                        });
                    }
                }
            },
            onChangeCascader(key,childKey){
                if(childKey == ''){
                    let _format = this.format[key];
                    this.$nextTick(()=>{
                        if (_format.hasOwnProperty("labelChange")) {
                            if(this.info[key]==undefined){
                                this.info[key]="";
                            }
                            this.$emit("on-select-submit", _format.labelChange, this.info[key]);
                        }
                    })
                }else{
                    let _format = this.format[key]['labelColList'][childKey];
                    this.$nextTick(()=>{
                        if (_format.hasOwnProperty("labelChange")) {
                            if(this.info[childKey]==undefined){
                                this.info[childKey]="";
                            }
                            this.$emit("on-select-submit", _format.labelChange, this.info[childKey]);
                        }
                    })
                }
            },

            dateOption(key) {
                let that = this;
                return {
                    disabledDate(date) {
                        let beginTimes = 0;
                        let endTimes = 0;
                        if (that.format[key].hasOwnProperty("limitBeginTime")) {
                            if (that.format[key].limitBeginTime.limitType == 1) {
                                //固定时间
                                beginTimes =
                                    Date.parse(new Date(that.format[key].limitBeginTime.val)) -
                                    86400000;
                            } else {
                                beginTimes =
                                    Date.parse(
                                        new Date(that.info[that.format[key].limitBeginTime.val])
                                    ) +1;
                                if(that.format[key].limitBeginTime.needNow){
                                    beginTimes-=3600;
                                }
                            }
                        }
                        if (that.format[key].hasOwnProperty("limitEndTime")) {
                            if (that.format[key].limitEndTime.limitType == 1) {
                                //固定时间
                                endTimes = Date.parse(
                                    new Date(that.format[key].limitEndTime.val)
                                );
                            } else {
                                endTimes = Date.parse(
                                    new Date(that.info[that.format[key].limitEndTime.val])
                                );
                            }
                            endTimes += 86400000;
                        }
                        return (
                            (beginTimes > 0 && date.valueOf() < beginTimes) ||
                            (endTimes > 0 && date.valueOf() > endTimes)
                        );
                        //return date && date.valueOf() < Date.now() - 86400000;
                    }
                };
            },
            handleCheckAll(key){
                if(this.format[key].labelDisabled) return;
                if (this.info[key].length>0&&this.info[key].length<this.format[key].labelValue.length) {
                    this.checkAll[key] = false;
                } else {
                    this.checkAll[key] = !this.checkAll[key];
                }
                this.info[key] = [];
                if (this.checkAll[key]) {
                    this.format[key].labelValue.forEach(item=>{
                        if(!item.disabled){
                            this.info[key].push(item.id)
                        }
                    })
                }
            },
            CascaderFormat(labels, selectedData){
                if(labels.length==0) return "";
                let retStr = labels[0]+" ";
                if(labels.length>1){
                    retStr+= labels[1];
                }
                return retStr;
            },
            handleMultipleTextAdd(key,obj){
                this.info[key].push(obj)
            },
            handleMultipleTextRemove(key,index){
                this.info[key].splice(index,1)
            }
        },
        created() {
            for (var key in this.format) {
                if (this.format[key].labelType == "uploadFile") {
                    this.format[key].labelValue = [];
                    if (this.info[key] == "" || !this.info[key]) continue;
                    let _fileArray =[]
                     _fileArray = this.info[key].split(",");
                    if (_fileArray.length == 0) continue;
                    for (let _fileName in _fileArray) {
                        let fileObj = {
                            name: _fileArray[_fileName],
                            url: this.CDN + _fileArray[_fileName]
                        };
                        this.format[key].labelValue.push(fileObj);
                    }
                } else if (this.format[key].labelType == "Number") {
                    if (this.info[key]!=undefined&&this.info[key]!=""&&typeof this.info[key] !== "number") {
                        this.info[key] = parseInt(this.info[key]);
                    }
                }
            }
        },
        beforeDestroy() {

        },
        mounted() {
            for (var obj in this.format) {
                if (this.format[obj].labelType == "uploadFile") {
                    this.$set(
                        this.uploadList,
                        // this.format[obj].uploadKey,
                        // this.$refs[this.format[obj].uploadKey][0].fileList
                    );
                }else 
                if(this.format[obj].labelType == "checkBoxGroup"){
                    if(!this.info.hasOwnProperty(obj)) continue
                    if(this.info[obj].length!=this.format[obj].labelValue.length||this.format[obj].labelValue.length==0){
                        this.$set(this.checkAll,obj,false)
                    }else{
                        this.$set(this.checkAll,obj,true)
                    }
                }
            }
        }
    };
</script>
<style lang="scss">
.el-input-wrap {
    // input {
    //     width: 100% !important;
    // }
    .el-input-number.is-without-controls .el-input__inner{
            margin-left: -15px !important;
            padding-right: 15px !important;
            width: 135px !important;
            text-align: left !important;
    }
    .el-input.is-disabled .el-input__inner{
        background-color: #FFF !important;
        color: currentcolor !important;
    }
}
</style>
